<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
</head>
<body>
<main class="bd-main order-1">
    <section>
        <div id="main" class="container">

        </div>
    </section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>
<script>
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [ o[this.name] ];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    function inputForm(input) {
        let ret = ''
        let name = input.description ? input.description : input.name
        switch (input.kind) {
        case 'password':
            //ret += `<div class="form-floating mb-3">`
            ret += `<input type="${input.kind}" name="${input.name}" class="form-control" placeholder="${name?name:''}" value="${input.value?input.value:''}">`
            //ret += `<label htmlFor="${input.name}">${input.name}</label>`
            //ret += `</div>`
            break
        case 'text':
            //ret += `<div class="form-floating mb-3">`
            ret += `<input type="${input.kind}" name="${input.name}" class="form-control" placeholder="${name?name:''}" value="${input.value?input.value:''}">`
            //ret += `<label htmlFor="${input.name}">${input.name}</label>`
            //ret += `</div>`
            break
        case 'select':
            //ret += `<div class="form-floating mb-3">`
            ret += `<select class="form-select" name="${input.name}"  aria-label="multiple select example" placeholder="${name?name:''}">`
            for(let i in input.items) {
                let item = input.items[i]
                ret += `<option value="${item}" ${ item == input.value ? 'selected="selected"' : ''}>${item}</option>`
            }
            ret += `</select>`
            //ret += `<label htmlFor="${input.name}">${input.name}</label>`
            //ret += `</div>`
            break
        case 'file':
            //ret += `<div class="mb-3">`
            ret += `<input type="${input.kind}" name="${input.name}" class="form-control" value="${input.value?input.value:''}">`
            //ret += `</div>`
            break
        case 'span':
            ret += `<span class="input-group-text">${input.value?input.value:''}</span>`
        default:
        }
        return ret
    }

    function proxiesForm(item) {
        let ret = ''
        ret += `<h2>${item.name}</h2>`
        ret += `<form id="${item.name}" class="row g-3" action="#">`
        ret += `<div class="input-group">`
        for(let i in item.inputs) {
            let input = item.inputs[i]
            ret += inputForm(input)
        }
        ret += `</div>`
        // ret += `<div class="col-auto"><input type="submit" class="btn btn-primary mb-3"/></div>`
        ret += `</form>`
        return ret
    }

    $.ajax({ url: "/data/proxy_layouts.json",
        success: function(result){
            for(let i in result) {
                let item = result[i]
                $("#main").append(proxiesForm(item))
                let target = $('#'+item.name)
                target.submit(function(data){
                    console.log(data)
                    $.ajax({
                        url: "/api/xxx",
                        type:"POST",
                        data: JSON.stringify(target.serializeObject()),
                        contentType: "application/json",
                        success:function(){
                            alert("成功");
                        }
                    });
                });
            }
            console.log(result)
        }});

</script>
</body>
</html>